<div class="dispatch-main-container">

  <div class="table-panel" [ngStyle]="{'transform': visible ? 'translateX(-480px)' : 'unset'}">
    <div class="arr-button" (click)="visible=!visible" [ngStyle]="{'transform': visible?'rotate(180deg)':'unset'}">
    </div>
    <div class="table-wrap">
      <nz-table
        #recordTable
        class="left-table"
        [nzFrontPagination]="false"
        [nzData]="recordTableData">
        <thead>
        <tr>
          <th nzAlign="center">山洪沟断面</th>
          <th nzAlign="center">水位</th>
          <th nzAlign="center">流量</th>
          <th nzAlign="center">测报时间</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of recordTable.data">
          <td nzAlign="center">{{ data.stadiaName }}</td>
          <td nzAlign="center">{{ data.waterHeight }}</td>
          <td nzAlign="center">{{ data.flux }}</td>
          <td nzAlign="center">{{ data.meaTime }}</td>
        </tr>
        </tbody>
      </nz-table>
    </div>
  </div>

  <div class="center-panel">
    <div class="bar">
      <div class="stations">
        <div class="area" *ngFor="let item of pptnrList">
          <div class="name"><span class="shuxian"></span>{{item.stadiaName.substring(0, 8)}}</div>
          <div class="value">{{item.drp}}<label class="dw">mm/h</label></div>
        </div>
      </div>

      <div class="data">
        <div class="data-item">
          <div>来洪量：-m³/s</div>
          <div>拦洪库进水：-m³/s</div>
        </div>
        <div class="data-item">
          <div>总防洪库容：14262.68万m³</div>
        </div>
        <div class="data-item">
          <div>西干渠进口流量：{{flow[0]}}m³/s</div>
          <div>唐徕渠进口流量：{{flow[1]}}m³/s</div>
        </div>
      </div>

      <div class="button-group">
        <button class="btn-1" nz-button nzType="default" (click)="viewFile(tplContent)">防汛调度预案</button>
        <button class="btn-2" nz-button nzType="default" (click)="goBack()">返回</button>
      </div>

    </div>

    <div class="ght-title">贺兰山东麓防汛调度体系</div>
    <div class="canvas-wrap" #canvasDiv>
      <div id="topology-canvas" style="width: 100%; height: 100%;"></div>

      <div class="gate-info" *ngIf="infoShow" [ngStyle]="{

                 'top': hoverItem.top,
                 'left': hoverItem.left
                 }">
        <div class="blue">警戒水位：{{hoverItem.alertLevel}}m</div>
        <div>当前水位：{{hoverItem.waterLevel}}m</div>
        <div class="blue">限定流量：{{hoverItem.limitTraffic}}m³/s</div>
        <div>当前引水流量：{{hoverItem.flow}}m³/s</div>
      </div>
    </div>

  </div>

  <ng-template #tplContent let-params let-ref="modalRef">
    <ngx-extended-pdf-viewer [src]="fileSrc" useBrowserLocale="true" height="700px"></ngx-extended-pdf-viewer>
  </ng-template>
</div>
